<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <!-- <link href="../static/bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css"/>
    <link href="../static/bootstrap/css/docs.css" rel="stylesheet" type="text/css"/>
    -->
   <link href="/static/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css"/>
   <link href="/static/viewback/css/mycss.css" rel="stylesheet" type="text/css"/>
   <title>帖子详情</title>
</head>
<body>
<include file="public:header"/>
<ul class="breadcrumb">
    <li>
      <a href="/Admin/user/userList" title="后台管理"><i class="icon-home"></i></a> <span class="divider">/</span>
    </li>
    <li>
      <a href="/Admin/posts/postsList" title="帖子管理">帖子管理</a> <span class="divider">/</span>
    </li>
    <li>
        <a href="/Admin/posts/postsList" title="主题列表">主题列表</a><span class="divider">/</span>
    </li>
    <li class="active">{$postsDetail.theme}</li> 
 </ul>
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span2"> 
                <include file="public:leftbar"/>
            </div>
            <div class="span10">
                <div class="well" style="background-color: white;">
                    <h3>{$postsDetail.theme}</h3>
                    <div style="border-bottom: 1px silver dashed"></div><br/>
                    <span><a href="/Admin/user/userInfo?id={$postsDetail.author_id}">{$postsDetail.author}</a>&nbsp;&nbsp;发表于{$postsDetail.dateline}&nbsp;&nbsp;跟帖数：{$replyCount}</span><span style="float: right">楼主</span>
                    <br/><pre  style="background-color: white;border: 0px;">{$postsDetail.content}<empty name="postsDetail.mood">{$postsDetail.mood}<else/><img src="{$postsDetail.mood}"/></empty></pre><br/>
                    <div style="border-bottom: 1px silver dashed"></div><br/>  
                    <a class="label label-info" id="btn_reply">回复</a>
                    {$error}
                </div>
                <div class="well" style="display: none;background-color: white;" id="reply_div"><a class="close" id="reply_div_close">&times;</a>
                    <form class="form-horizontal form-inline" action="/Admin/posts/submitReply" method="post" id="reply_form">
                        <div class="img">
                        <input name="mood" type="radio" value="/static/view/image/mood/001.gif"/><img src="/static/view/image/mood/001.gif"/>
                        <input name="mood" type="radio" value="/static/view/image/mood/002.gif"/><img src="/static/view/image/mood/002.gif"/>
                        <input name="mood" type="radio" value="/static/view/image/mood/003.gif"/><img src="/static/view/image/mood/003.gif"/>
                        <input name="mood" type="radio" value="/static/view/image/mood/004.gif"/><img src="/static/view/image/mood/004.gif"/>
                        <input name="mood" type="radio" value="/static/view/image/mood/005.gif"/><img src="/static/view/image/mood/005.gif"/>
                        <input name="mood" type="radio" value="/static/view/image/mood/006.gif"/><img src="/static/view/image/mood/006.gif"/>
                        <input name="mood" type="radio" value="/static/view/image/mood/007.gif"/><img src="/static/view/image/mood/007.gif"/>
                        <input name="mood" type="radio" value="/static/view/image/mood/008.gif"/><img src="/static/view/image/mood/008.gif"/>
                        <input name="mood" type="radio" value="/static/view/image/mood/009.gif"/><img src="/static/view/image/mood/009.gif"/>
                        <input name="mood" type="radio" value="/static/view/image/mood/010.gif"/><img src="/static/view/image/mood/010.gif"/>
                        <input name="mood" type="radio" value="/static/view/image/mood/011.gif"/><img src="/static/view/image/mood/011.gif"/>
                        <input name="mood" type="radio" value="/static/view/image/mood/012.gif"/><img src="/static/view/image/mood/012.gif"/>
                        <input name="mood" type="radio" value="/static/view/image/mood/013.gif"/><img src="/static/view/image/mood/013.gif"/>
                        </div>
                        <input name="theme_id" type="hidden" value="{$postsDetail.id}"/>
                        <input name="" type="button" value="h1" id="h1" class="btn btn-mini" title="1号标题"/>
                        <input name="" type="button" value="h2" id="h2" class="btn btn-mini" title="2号标题"/>
                        <input name="" type="button" value="h3" id="h3" class="btn btn-mini" title="3号标题"/>
                        <input name="" type="button" value="h4" id="h4" class="btn btn-mini" title="4号标题"/>
                        <input name="" type="button" value="h5" id="h5" class="btn btn-mini" title="5号标题"/>
                        <input name="" type="button" value="b" id="bold" class="btn btn-mini" title="粗体"/>
                        <input name="" type="button" value="i" id="italics" class="btn btn-mini" title="斜体"/>
                        <input name="" type="button" value="u" id="underline" class="btn btn-mini" title="下划线"/>
                        <a id="apply" class="label label-info">apply</a><br/>
                        <textarea id="selectable" name="content" class="span6" rows="4" required></textarea><br/>
                        <p id="container"></p>
                        <button class="btn-primary btn-small" type="submit">提交回复</button>
                    </form>
                </div>
                <span class="label label-info" id="reply_list_btn" style="cursor: pointer">查看回复</span><br/><br/>
                <div id="reply_list_div">
                    <table class="table table-bordered">
                        <thead><tr><th>用户名</th><th>回复内容</th><th>回复时间</th><th>楼层</th></tr></thead>
                        <tbody>
                            <volist name="replyList" id="replyList" key="floor">
                                <tr><td>{$replyList.author}</td><td><pre  style="background-color: white;border: 0px;">{$replyList.content}<empty name="replyList.mood">{$replyList.mood}<else/><img src="{$replyList.mood}"/></empty></pre></td><td>{$replyList.dateline}</td><td>#{$floor}</td></tr>
                            </volist>
                        </tbody>
                    </table>
                    {$pagestring}
                </div>
            </div>
        </div>
</div>
<include file="public:footer"/>
<script type="text/javascript" src="/static/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="/static/viewback/js/jquery-1.8.3.js"></script>
<script type="text/javascript">
     function getPositions(){
        var startPosition=endPosition=0;
        var element=document.getElementById('selectable');
        if(document.selection){
            var range=document.selection.createRange();
            var drange=range.duplicate();
            drange.moveToElementText(element);
            drange.setEndPoint('EndToEnd',range);
            startPosition=drange.text.length-range.text.length;
            endPosition=startPosition+range.text.length;//alert('ie');
        }
        else if(window.getSelection){
            //firefox chrome safari
            startPosition=element.selectionStart;
            endPosition=element.selectionEnd;//alert(endPosition);
        }
        return {'start':startPosition,'end':endPosition};
    }
    //jquery
    $(document).ready(function(){
        $('#reply_div_close').click(function(){
            $('#reply_div').slideUp('slow');
        })
        $('#reply_list_close').click(function(){
            $('#reply_list_div').slideUp('slow');
        })
        $('#reply_list_btn').click(function(){
            $('#reply_list_div').slideToggle('slow');
        })
       $('#btn_reply').click(function(){
           $('#reply_div').slideToggle('slow');
       });
       $('#reply_form').submit(function(){
           if($.trim($('#selectable').val())==''){
               alert('回复内容不能为空');
               return false;
           }
           
       });
       /*格式化文本，给文本选中添加样式，例如斜体，粗体*/
        $('#apply').click(function(){
            $('#container').html($('#selectable').val());
        });
        $('.btn').click(function(){
            var positions=getPositions();
            if(positions.start==positions.end){
                return false;
            }
            var tag=$(this).val();
            var textOnPage=$('#selectable').val();
            var startString=textOnPage.substr(0, positions.start);
            var targetString=textOnPage.substr(positions.start,positions.end-positions.start);
            var formattedString="<" + tag+">" + targetString + "</"+tag+">";
            var endString=textOnPage.substr(positions.end);//alert(endString+'||'+startString+'||'+formattedString);
            $("#selectable").val(startString + formattedString + endString);//alert($("#selectable").val());
        });
        
    });
       
</script>
</body>
</html>

